<!--车辆年检-->
<template>
  <div>
    <div class="title">
      <span class="title_left"></span>
      <span class="title_right"></span>
      <div class="btns">
        <p>车辆年检代办服务</p>
        <button style="margin-right: 3rem" @click="goQuestion">常见问题</button>
        <button style="margin-left: 3rem"><a href="tel:18126791038">联系客服</a></button>
      </div>
    </div>
    <ul class="box">
      <li>
        <h3 style="margin-bottom: 5px">
          <span style="color: #5a5959">办理条件</span>
          <span style="font-size: 12px;font-weight: 400">（不满足条件车辆需上线检测）</span>
        </h3>
      </li>
      <li>1、5座及5座以下的蓝牌车，即普通家用小轿车</li>
      <li>2、2013年4月3日后购买的车辆</li>
      <li>3、免检期内未发生过致人伤亡事故的车辆</li>
    </ul>
    <div style="margin: 30px;border-bottom: 1px solid #ddd;font-size: 13px">
      <keyboard @callBack="ok_carNum" :data="carNum" id="addCarkey"
                styleName="padding:6px;borderRadius:5px;">
        <span>车牌号：</span>
      </keyboard>
    </div>
    <div style="border-top: 10px solid #eee">
      <p style="padding: 1rem">办理流程</p>
      <div style="padding: 0 6%">
        <img src="../../assets/img/icon.png" style="width: 100%" alt="">
      </div>
      <ul style="display: flex">
        <li style="flex: 1;text-align: center">添加车辆</li>
        <li style="flex: 1;text-align: center">智能匹配</li>
        <li style="flex: 1;text-align: center">一键下单</li>
        <li style="flex: 1;text-align: center">极速代办</li>
      </ul>
      <div class="tab">
          <span :class="isShowOnline?'':'active'" @click="isShowOnline = false">免检办理流程</span>
          <span :class="isShowOnline?'active':''" @click="isShowOnline = true">上线检办理流程</span>
        <div class="tab_font" v-if="isShowOnline">
          <p style="text-align: center;color: #797979;margin-bottom: 5px">车辆要求</p>
          <p>
            1、外观与行驶证照片中车辆保持一致，保持车身整洁，漆面完整；
          </p>
          <p>
            2、不可以私自改装灯光系统，保证各灯光正常工作；
          </p>
          <p>
            3、前排侧窗后视镜位置的三角区域不允许贴膜；
          </p>
          <p>
            4、同轴轮胎花纹应一致，胎面磨损不严重，尺寸与原车一致；
          </p>
          <p>
            5、灭火器和三角警告牌是必备物品；
          </p>
        </div>
      </div>
      <ul class="step">
        <li>
          <img src="../../assets/img/1.jpg" alt="">
          <div class="content">
            <p style="font-size: 14px;color: #000000">准备材料</p>
            <p>请将以下年检代办所需材料备齐：</p>
            <p>1、有效期内交强险副本原件；</p>
            <p>2、有效期内车船税发票原件 <br>(如交强险含车船税，则无需提供)；</p>
            <p>3、车主身份证复印件（正反面）；</p>
            <p>4、车辆行驶证原件复印件；</p>
            <p>5、车辆登记证书复印件（仅粤牌车需提供）；</p>
            <p>6、铭牌照片打印件或完税证明原件（仅进口车需提供）；</p>
            <p>7、机动车业务委托书（仅公司车需提供）。</p>
          </div>
        </li>
        <li>
          <img src="../../assets/img/2.jpg" alt="">
          <div class="content">
            <p style="font-size: 14px;color: #000000">寄送材料</p>
            <p>上门取件（仅限广东省内）或自主寄送资料；</p>
            <p>资料安全由车行易和物流共同担保。</p>
          </div>
        </li>
        <li>
          <img src="../../assets/img/3.jpg" alt="">
          <div class="content">
            <p style="font-size: 14px;color: #000000">年审办理</p>
            <p>资料审核，审核结果无误后哦我们将立即为您办理年检手续。</p>
          </div>
        </li>
        <li>
          <img src="../../assets/img/4.jpg" alt="">
          <div class="content">
            <p style="font-size: 14px;color: #000000">办理完成，资料寄回</p>
            <p>年检通过之后我们将第一时间寄还相关资料给您；您签收资料并确认是否完整。</p>
          </div>
        </li>
      </ul>
      <div style="height: 60px"></div>
    </div>
    <div class="commit">
      <button >立即办理</button>
    </div>
  </div>
</template>

<script>
  import keyboard from '../../components/keyboard'

  export default {
    name: "inspection",
    data() {
      return {
        carNum: {
          shortname: '',
          letter: '',
          content: ''
        },
        isShowOnline:false
      }
    },
    components: {keyboard},
    methods: {
      ok_carNum(data) {
        this.carNum.content = data
      },
      goQuestion(){
        this.$router.push('./question')
      }
    },

  }
</script>

<style scoped>
  .title {
    position: relative;
    height: 10rem;
    width: 100%;
    background: #2967f5;
  }

  .title_left {
    float: left;
    background: url("../../assets/img/bg1.png") no-repeat;
  }

  .title_right {
    float: right;
    background: url("../../assets/img/bg2.png") no-repeat right top;
  }

  .title_left, .title_right {
    height: 100%;
    width: 50%;
    background-size: 70%;
  }

  .btns {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
  }

  .btns p {
    font-size: 2rem;
    margin: 0 0 5px 0;
  }

  .btns button {
    font-weight: 200;
    border: 1px solid white;
    background: none;
    color: white;
    border-radius: 3px;
    margin-top: 5px;
    padding: 2px 10px;
  }
  .btns a{
    text-decoration: none;
    color: white;
  }

  .box {
    color: #9a9a9a;
    border-bottom: 10px solid #eee;
    padding: 1rem 1rem;
  }

  .tab {
    margin-top: 2rem;
    text-align: center;
    padding: 0.5rem 2rem;
  }


  .tab span:first-child {
    border: 1px solid #ddd;
    padding: 0.5rem 2rem;
    margin-right: -3px;

  }
  .tab span:nth-child(2) {
    border: 1px solid #ddd;
    border-left: none;
    padding: 0.5rem 2rem;
  }
  .tab .tab_font{
    text-align: left;
    margin-top: 2rem;
    color: #9a9a9a;
    background: #f6f6f6;
    padding: 1rem 0.5rem;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .active{
    background: #eee;
  }
  .step{
    margin: 10px 10% 0;
    border-left: 1px solid #ddd;
  }
  .step li{
    min-height: 8rem;
    color: #9a9a9a;
    font-size: 12px;
  }
  .step li img{
    width: 35px;
    margin-left: -28px;
    padding: 10px;
    background: white;
  }
  .step li .content{
    margin-top: -38px;
    margin-left: 25px;
  }
  .commit{
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding: 1rem;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #ddd;
  }
  .commit button{
    font-size: 14px;
    color: white;
    background: #2d8cf0;
    width: 100%;
    border-radius: 5px;
    padding: .6rem 0;
    font-weight: 300;
  }
</style>
